﻿<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>修改头像</title>

    <link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png">
    <link rel="stylesheet" href="/assets1/css/bootstrap.min.css">
    <link rel="stylesheet" href="/style/icon/icon.css">
    <link rel="stylesheet" href="/assets1/css/font-awesome.min.css">
    <link rel="stylesheet" href="/assets1/css/animate.min.css">
    <link rel="stylesheet" href="/assets1/css/owl.carousel.css">
    <link rel="stylesheet" href="/assets1/css/slicknav.min.css">
    <link rel="stylesheet" href="/assets1/css/magnific-popup.css">
    <link rel="stylesheet" href="/assets1/css/style.css">
    <link rel="stylesheet" href="/assets1/css/responsive.css">
    <style>
        .centered-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 20px;
        }

        .form-group {
            width: 100%;
            max-width: 400px;
            margin-bottom: 20px;
        }

        .form-group label {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 10px;
            display: block;
        }

        .form-group input {
            width: 100%;
            padding: 10px;
            border-radius: 5px;
            border: 1px solid #ccc;
        }

        #uploadSubmit {
            color: white;
            font-size: 18px;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: 0.3s;
        }

        #uploadSubmit:hover {
            background-color: #0056b3;
        }

        .alert {
            width: 100%;
            max-width: 400px;
            margin-top: 20px; /* 提示框与表单之间有间距 */
        }

        .avatar-container {
            margin-bottom: 20px;
            text-align: center;
        }

        .avatar-container img {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            border: 2px solid #ccc;
        }
    </style>
</head>

<body>
<section th:replace="~{common/blogHead :: blogHead}"></section>
<section th:replace="~{common/blogMenu :: blogMenu}"></section>

<section class="rapid-breadcromb-area section_50">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="breadcromb">
                    <h3>修改头像</h3>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="rapid-Allpost-area section_50">
    <div class="container">
        <div class="row">
            <div class="col-md-9">
                <div class="blog-page-left">
                    <div class="single-blog">
                        <div class="blog-text single-post-text">
                            <div  class="rapid-leave-comment centered-container">
                                <h2>个人信息</h2>

                                <!-- 显示当前头像 -->
                                <div class="avatar-container">
                                    <img th:src="${getVisitor != null} ? '/assets/img/' + ${getVisitor.visitorAvatar} : '/assets/img/noLoginAvatar.jpeg'"
                                         alt="用户头像">
                                </div>

                                <form action="/visitor/uploadAvatar" method="POST" enctype="multipart/form-data">
                                    <!-- 用户昵称 -->
                                    <div class="form-group">
                                        <label for="nickname">游客昵称：</label>
                                        <input id="nickname" class="ns-com-name" name="nickname" type="text"
                                               th:value="${getVisitor != null ? getVisitor.visitorName : ''}" required>
                                    </div>
                                    <div class="form-group">
                                        <label for="avatar">修改头像：</label>
                                        <input id="avatar" class="ns-com-name" name="avatar" type="file" required>
                                    </div>
                                    <input id="uploadSubmit" type="submit" value="提交">
                                    <!-- 如果 message 不为空，则显示提示信息 -->
                                    <div class="alert alert-info" th:if="${message}" th:text="${message}"></div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div th:replace="~{common/blogRight :: blogRight}"></div>
        </div>
    </div>
</section>

<footer th:replace="~{common/blogDown :: blogDown}"></footer>

<script src="/assets1/js/jquery.min.js"></script>
<script src="/assets1/js/bootstrap.min.js"></script>
<script src="/assets1/js/jquery.magnific-popup.min.js"></script>
<script src="/assets1/js/owl.carousel.min.js"></script>
<script src="/assets1/js/jquery.slicknav.min.js"></script>
<script src="/assets1/js/custom.js"></script>
<script src="/assets1/js/common.js"></script>


</body>
</html>
